<template>
  <view>
    <view id="_drag_button" class="drag" :style="'left: ' + left + 'px; top:' + top + 'px;'" @touchstart="touchstart"
      @touchmove.stop.prevent="touchmove" @touchend="touchend" @click.stop.prevent="click"
      :class="{transition: isDock && !isMove }">
      <view class="column" v-if="type=='call'">
        <image src="../../static/icon/small.svg" mode="" style="width:120rpx;height:120rpx"></image>
        <text style="color:#329CFF;margin-top:8rpx;font-weight: 500;">呼叫安蓝服务</text>
      </view>
      <view style="position: relative;" v-else-if="type=='message'">
        <image :src="img_sub" mode="" style="width: 60rpx;height: 60rpx;"></image>
        <text class="drop"></text>
      </view>
      <image :src="img_sub" mode="" class="group_img" v-else-if="type=='income'" style="height:100rpx"></image>
      <image :src="img_sub" mode="" class="group_img" v-else></image>
    </view>
  </view>
</template>

<script>
  import { isH5 } from '@/utils/platform';
  export default {
    name: 'drag-button',
    props: {
      isDock: {
        type: Boolean,
        default: false
      },
      existTabBar: {
        type: Boolean,
        default: false
      },
      img_sub: {
        type: String,
      },
      type: {
        type: String,
      }
    },
    data() {
      return {
        top: 0,
        left: 0,
        width: 0,
        height: 0,
        offsetWidth: 0,
        offsetHeight: 0,
        windowWidth: 0,
        windowHeight: 0,
        isMove: true,
        edge: 10,
        text: '按钮',
      }
    },
    mounted() {
      const sys = uni.getSystemInfoSync();
      this.windowWidth = sys.windowWidth;
      this.windowHeight = sys.windowHeight;

      // #ifdef APP-PLUS
      this.existTabBar && (this.windowHeight -= 50);
      // #endif
      if (sys.windowTop) {
        this.windowHeight += sys.windowTop;
      }
      console.log(sys)
      const query = uni.createSelectorQuery().in(this);
      query.select('#_drag_button').boundingClientRect(data => {
        this.width = data.width;
        this.height = data.height;
        this.offsetWidth = data.width / 2;
        this.offsetHeight = data.height / 2;
        this.left = this.windowWidth - this.width;
        this.top = this.type == 'call' ? 280 : 500
      }).exec();
    },
    methods: {
      click() {
        this.$emit('btnClick');
      },
      touchstart(e) {
        this.$emit('btnTouchstart');
      },
      touchmove(e) {
        // 单指触摸
        if (e.touches.length !== 1) {
          return false;
        }

        this.isMove = true;

        this.left = e.touches[0].clientX - this.offsetWidth;

        let clientY = e.touches[0].clientY - this.offsetHeight;
        // #ifdef H5
        clientY += this.height;
        // #endif
        let edgeBottom = this.windowHeight - this.height - this.edge;

        // 上下触及边界
        if (clientY < this.edge) {
          this.top = this.edge;
        } else if (clientY > edgeBottom) {
          this.top = edgeBottom;
        } else {
          this.top = clientY
        }

      },
      touchend(e) {
        if (this.isDock) {
          let edgeRigth = this.windowWidth - this.width - this.edge;

          if (this.left < this.windowWidth / 2 - this.offsetWidth) {
            this.left = this.edge;
          } else {
            this.left = edgeRigth;
          }

        }

        this.isMove = false;

        this.$emit('btnTouchend');
      },
    }
  }
</script>

<style lang="scss">
  .drag {
    font-size: $uni-font-size-sm;
    position: fixed;
    z-index: 999999;

    &.transition {
      transition: left .3s ease, top .3s ease;
    }

    .group_img {
      width: 175rpx;
      height: 81rpx;
    }
  }

  .drop {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: #FF6565;
    position: absolute;
    top: 5px;
    right: 5px;
  }
</style>